<script setup lang='ts'>
import AddProcess from './components/AddProcess.vue'
import AddTestProcess from './components/AddTestProcess.vue'
import ApplyAssets from './components/ApplyAssets.vue'
import StopProcess from './components/StopProcess.vue'

const addProcessVisible = ref(false)
const stopVisible = ref(false)
const testVisible = ref(false)
const applyAssetsVisible = ref(false)
</script>

<template>
  <div mt-10 flex-around-center>
    <div flex-col flex-y-center class="item" @click="addProcessVisible = true">
      <div class="i-clarity:process-on-vm-line icon" />
      客户服务流程
    </div>

    <div flex-col flex-y-center class="item" @click="testVisible = true">
      <div class="i-file-icons:test-ruby icon" />
      测试流程
    </div>
    <!-- <div flex-col flex-y-center class="item">
      <div class="i-material-symbols:component-exchange-sharp icon" />
      业务变更流程
    </div> -->
    <!-- <div flex-col flex-y-center class="item">
      <div class="i-icon-park-twotone:buy icon" />
      采购流程
    </div> -->
    <div flex-col flex-y-center class="item" @click="applyAssetsVisible = true">
      <div class="i-majesticons:cash-line icon" />
      资产申请流程
    </div>
    <!-- <div flex-col flex-y-center class="item" @click="stopVisible = true">
      <div class="i-material-symbols:autostop-rounded icon" />
      关停流程
    </div> -->
    <AddProcess v-model="addProcessVisible" />
    <StopProcess v-model="stopVisible" />
    <AddTestProcess v-model="testVisible" />
    <ApplyAssets v-model="applyAssetsVisible" />
  </div>
</template>

<style scoped lang='scss'>
.item {
  cursor: pointer;
  padding: 20px;
  width: 140px;
  height: 120px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  transition: all 0.3s;
  font-size: 16px;
  &:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  &:nth-child(1) {
    .icon {
      color: purple;
    }
  }
  &:nth-child(2) {
    .icon {
      color: #ff9900;
    }
  }
  &:nth-child(3) {
    .icon {
      color: #0099ff;
    }
  }
  &:nth-child(4) {
    .icon {
      color: #f323fb;
    }
  }
  &:nth-child(5) {
    .icon {
      color: #0000ff;
    }
  }
  &:nth-child(6) {
    .icon {
      color: #ff0000;
    }
  }
  .icon {
    font-size: 40px;
    margin-bottom: 15px;
  }
}
</style>
